@tailwind base;
@tailwind components;
@tailwind utilities;
@color: #aaa;
:root {
  font-weight: normal;
  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --theme-color: #ff8032;
  --bg-color: #141414;
  --toast-index: 999999; // toast最高级
  --modal-index: 99999; // 弹窗第二级
  --pop-index: 9999; // 弹出确认，回顶部相关
  --content-index: 999; // 内容级
}

body {
  @apply bg-white;
  font-family:
    PingFang SC,
    Alibaba PuHuiTi 2,
    Inter,
    system-ui,
    Avenir,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  scroll-behavior: smooth;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    @apply w-1 h-1;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #eee;
  }
}

#toast-root {
  @apply fixed left-2/4 top-2/4 w-auto h-auto overflow-x-hidden flex items-center justify-center flex-col;
  z-index: var(--modal-index);
  transform: translate(-50%, -50%);
}

// 通用样式

.textEllipsis {
  @apply overflow-hidden whitespace-nowrap text-ellipsis break-all;
}

button {
  @apply bg-transparent border-0 p-0 m-0 outline-none;
  appearance: none;
  /* 取消外边距 */
  font-family: inherit;
}

/* 如果需要去除按钮的hover效果 */
button:hover {
  background-color: transparent;
}

.tooltips {
  @apply flex w-44 py-1;

  & > img {
    @apply shrink-0;
    margin-right: 10px;
  }

  & > span {
    @apply text-xs;
    font-family: PingFang SC;
    color: #767676;
  }
}

.tooltipBtn {
  .defaultImg {
    width: 14px;
    height: 14px;
  }

  .defaultImg2 {
    @apply hidden;
  }

  &:hover {
    .defaultImg2 {
      @apply inline-block;
    }

    .defaultImg1 {
      @apply hidden;
    }
  }
}

.beautifyScroll {
  &::-webkit-scrollbar {
    @apply w-1 h-1;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #eee;
  }
}

.hideScroll {
  &::-webkit-scrollbar {
    @apply w-0 h-0;
  }

  &::-webkit-scrollbar-corner,
  &::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-transparent;
  }
}

input,
textarea {
  @apply outline-none border-none text-main;
  &::-webkit-input-placeholder {
    color: @color;
  }
  &::-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &:-moz-placeholder {
    color: @color;
  }
}
.inputStyle {
  @apply inline-block outline-none rounded px-5 text-sm text-main;
  font-family: PingFang SC;
  border: 1px solid #eee;
  height: 30px;
  &.error {
    border-color: #ff0000;
  }
}

.input:focus,
.input {
  background: transparent !important;
}

// rem适配
// @media screen and (min-width: 1000px) and (max-width: 1400px) {
//   :root {
//     font-size: 14px;
//   }
// }

// @media screen and (min-width: 767px) and (max-width: 1000px) {
//   :root {
//     font-size: 12px;
//   }
// }
